<template>
  <div class="container">

    <div class="tips-title">1.基础用法</div>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple">span 24</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="12"><div class="grid-content bg-purple">span 12</div></el-col>
      <el-col :span="12"><div class="grid-content bg-purple-light">span 12</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="8"><div class="grid-content bg-purple">span 8</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light">span 8</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple">span 8</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">span 6</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light">span 6</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">span 6</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light">span 6</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="4"><div class="grid-content bg-purple">span 4</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light">span 4</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple">span 4</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light">span 4</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple">span 4</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light">span 4</div></el-col>
    </el-row>
    <br />
    <div class="tips-title">2.分栏间隔<span class="tips-explain">分栏之间存在间隔, el-row :gutter='(number)'</span></div>
    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple">span 4</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light">span 4</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">span 4</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light">span 4</div></el-col>
    </el-row>
    <br />
    <div class="tips-title">3.分栏偏移<span class="tips-explain">支持偏移指定的栏数, el-col :offset='(number)'</span></div>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">span 6</div></el-col>
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple-dark">span 6 offset 6</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple">span 6 offset 6</div></el-col>
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple-dark">span 6 offset 6</div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6"><div class="grid-content bg-purple">span 12 offset 6</div></el-col>
    </el-row>
    <br />
    <div class="tips-title">4.对齐方式<span class="tips-explain">通过 flex 布局来对分栏进行灵活的对齐, el-row type='flex' </span></div>
    <p class="tips-explain">el-row :justify = start</p>
    <el-row type="flex" class="row-bg" justify="start">
      <el-col :span="4"><div class="grid-content bg-purple">span 4</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light">span 4</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-dark">span 4</div></el-col>
    </el-row>
    <p class="tips-explain">el-row :justify = center</p>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="4"><div class="grid-content bg-purple">span 4</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light">span 4</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-dark">span 4</div></el-col>
    </el-row>
    <p class="tips-explain">el-row :justify = end</p>
    <el-row type="flex" class="row-bg" justify="end">
      <el-col :span="4"><div class="grid-content bg-purple">span 4</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light">span 4</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-dark">span 4</div></el-col>
    </el-row>
    <p class="tips-explain">el-row :justify = space-between</p>
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="4"><div class="grid-content bg-purple">span 4</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light">span 4</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-dark">span 4</div></el-col>
    </el-row>
    <p class="tips-explain">el-row :justify = space-around</p>
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="4"><div class="grid-content bg-purple">span 4</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light">span 4</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-dark">span 4</div></el-col>
    </el-row>

    <div class="tips-title"><span>4.响应式布局</span></div>
    <el-row :gutter="10">
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>

  </div>

</template>
<script>
    export default {
        name: 'b-layout'
    }
</script>
<style>
  .el-row {
    margin-bottom: 20px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 6px;
    min-height: 36px;
    text-align: center;
    line-height: 36px;
    color: #666666;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #FAFAFA;
  }
</style>

